/**
 * 获取元素
 */
let tc = document.querySelectorAll('.tc')
let mask = document.querySelector('#mask')
let modalBro = document.querySelector('.modalBro')



/**
 * 1.需求:点击 申请数据 tc 显示蒙层 mask
 *      点击 modalBro 关闭蒙层 mask,
 */
tc.forEach(function (dom) {
    dom.addEventListener('click',function(){
        mask.style.display = "block"
    })
})

modalBro.addEventListener('click',function(){
    //console.log(1);
    mask.style.display = "none"
})




/**
 * 2.需求:点击扫码登录 log2 ,显示二维码 modal-4,添加样式log-2 
 *        点击账号登录 log1 ,显示二维码 modal-3,添加样式log-1
 */

 let log1 = document.querySelector('.modal-2 #log1')
 let log2 = document.querySelector('.modal-2 #log2')
 let modal3 = document.querySelector('.modal3')
 let modal4 = document.querySelector('.modal4')
let index = 0;
log1.addEventListener('click',function () {
    //console.log(1);
    log2.className = ''
    this.className = 'log'
    modal3.style.display= "block"
    modal4.style.display= "none"

})
log2.addEventListener('click',function () {
    //console.log(2);
    log1.className = ''
    log2.className = 'log'
    modal4.style.display= "block"
    modal3.style.display= "none"

})





let userIn = document.querySelector('.user input')
let pwdIn = document.querySelector('.pwd input')
let userText = document.querySelector('.user .userText')
let pwdText = document.querySelector('.pwd .pwdText')


let userReg = /^\d{6}$/
let pwdReg = /^\d{6}$/

/**
 * 3.账号(user)失去焦点时,验证手机号是否合法,不合法显示userText
 * 事件类型:blur
 * 方法:test()
 */
 userIn.addEventListener('blur',function(){
    //console.log(1);
    //2.获取结果
    bool = userReg.test(userIn.value)
    //console.log(bool);
    //3.判断
    if (bool) {
        userText.style.display = "none";
    }else{
        userText.style.display = "block";
        userText.textContent = '六位账号错误!!'
    }

})

pwdIn.addEventListener('blur',function(){
    //console.log(1);
    //2.获取结果
    bool = pwdReg.test(pwdIn.value)
    //console.log(bool);
    //3.判断
    if (bool) {
        pwdText.style.display = "none";
    }else{
        pwdText.style.display = "block";
        pwdText.textContent = '六位密码错误!!'
    }

})
















/**
 * 3.需求:遍历 apiTypeData ,将name组装到sort 下的 a 标签中
 */
 let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

let sort = document.querySelector('.sort')

//定义一个数组保存标签
let sortHtml = '';

//遍历
apiTypeData.forEach(function(v){
    //console.log(v);
    //组装
    sortHtml += `<a href="#" class="${v.isnew ? 'wide':'' }" data-keyword ="${v.keyword}">${v.name}</a>`
})
//console.log(sortHtml);
//渲染
sort.innerHTML = sortHtml;


/**
 * 4.需求:利用事件委派,给 sort点击事件,筛选出事件源,将当前事件源渲染到目标
 */
let sort1 = document.querySelector('#sort1')
let sort2 = document.querySelector('#sort2')

sort.addEventListener('click',function(e){
    //筛选出事件源:触发事件的标签对象
    if (e.target.nodeName === 'A') {
        //将当前事件源渲染到目标
        sort1.textContent=e.target.textContent;
        //sort1.textContent=e.target.textContent

        //获取当前事件源的自定义属性 并渲染
        sort2.placeholder = e.target.dataset.keyword;

        
    }
})
